<template>
  <div class="chart-container">
    <div ref="chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from '@/utils/request'
import vueStateMixin from "@/utils/vue-state-mixin";

export default {
  name: 'PieChart',
  mixins: [vueStateMixin],
  props: {
    deviceId: {
      type: Number,
      require: false
    },
    devices: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      showDeviceId: null,
      chartData: []
    }
  },
  computed: {
    deviceTitle() {
      if (this.showDeviceId == null) {
        return '全部设备'
      }
      return this.devices.find(d => d.deviceId == this.showDeviceId).deviceName
    },
    chartOption() {
      return {
        backgroundColor: 'rgba(0, 0, 0, 0)',
        // 折线颜色
        // color: this.getColor('chartSeriesColor', 'chartSeriesColor', '#FFFFFF'),
        // grid: {
        //   top: this.getConfigValueByConfigIdIfDefault("grid-top", 7) + "%",
        //   right: this.getConfigValueByConfigIdIfDefault("grid-right", 0) + "%",
        //   bottom: this.getConfigValueByConfigIdIfDefault("grid-bottom", 7) + "%",
        //   left: this.getConfigValueByConfigIdIfDefault("grid-left", 7) + "%",
        // },
        title: {
          text: this.deviceTitle + '平均生产用时分布',
          // subtext: '单位（秒）',
          x: 'left'
          // textStyle: {
          //   // 标题颜色
          //   color: this.getColor('titleColor', 'titleColor', '#FFFFFF'),
          //   fontSize: this.getConfigValueByConfigIdIfDefault('titleFontsize', 18),
          // },
          // subtextStyle: {
          //   // 子标题颜色
          //   color: this.getColor('subTitleColor', 'subTitleColor', '#FFFFFF'),
          //   fontSize: this.getConfigValueByConfigIdIfDefault('subTitleFontsize', 12),
          // },
        },
        series: [{
          type: 'pie',
          // roseType: 'radius',
          radius: [40, 70],
          center: ['50%', '60%'],
          label: {
            alignTo: 'edge',
            formatter: '{b}\n{c}秒'
          },
          data: [
            { value: this.chartData.opntime, name: '开模时长' },
            { value: this.chartData.clstime, name: '合模时长' },
            { value: this.chartData.injtime, name: '注射时长' },
            { value: this.chartData.meltime, name: '熔胶时长' },
            { value: this.chartData.cootime, name: '冷却时长' },
            { value: this.chartData.gettime, name: '取件时长' }
          ]
        }]
      }
    }
  },
  watch: {
    deviceId: {
      handler() {
        this.showDeviceId = this.deviceId
      }
    },
    showDeviceId: {
      handler() {
        this.loadChartData()
      }
    },
    chartOption: {
      immediate: true,
      deep: true,
      handler() {
        this.$nextTick(() => {
          if (this.$echarts == null) {
            this.$echarts = echarts.init(this.$refs['chart'], 'dark')
          }
          this.$echarts.setOption(this.chartOption)
        })
      }
    }
  },
  created() {
    if (this.deviceId == null) {
      this.showDeviceId = null
    } else {
      this.showDeviceId = this.deviceId
    }
    this.loadChartData()

    let showDeviceId = 0
    setInterval(() => {
      if(this.pageActivate) {
        if (this.deviceId == null && this.devices != null && this.devices.length > 0) {
          this.showDeviceId = this.devices[showDeviceId].deviceId
          showDeviceId = (showDeviceId + 1) % this.devices.length
        } else {
            this.loadChartData()
        }
      }
    }, 5000)

    window.addEventListener('resize', () => {
      if (this.$echarts != null) {
        this.$echarts.resize()
      }
    })
  },
  methods: {
    loadChartData() {
      request({
        url: '/api/datalog/statProdStepTimes',
        params: {
          deviceId: this.showDeviceId
        }
      }).then(resp => {
        if (resp.success) {
          this.chartData = resp.data
        } else {
          this.$message.error(resp.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
